<script setup>
import { Hello, Counter, Input, List } from 'components';

import { ref } from 'vue';

const value = ref('hello');
</script>

<template>
  <div>
    <Hello />
    <Counter />
    <Input v-model="value" />
    value: {{ value }}
    <div>list:
      <List :list="[{ id: 1, value: 2 }, { id: 2, value: 2 }]" />
    </div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
